<template>
	<view class="recommend">
	<!-- <view class="header">
      <view class="right">
        <text>国锐影视推荐奖励</text>
        <view class="sub">
          <view>① 邀请好友注册</view>
          <view>② 好友或好友推荐好友购买</view>
          <view>③ 我拿奖励</view>
        </view>
      </view>
    </view> -->
  <view class="section1">
      <view class="item">
        <view>
          <text>奖励金</text>
					<text>{{totalThanks}}</text>
        </view>
      </view>
      <view class="item">
        <view>
          <text>好友</text>
          <text>{{total}}</text>
        </view>
      </view>
    </view>
    <view class="section2">
      <view class="title">
        <image src="../../static/image/jianbian.png" mode="widthFix"></image>
        <text>简单三步  坐享奖励</text>
        <image src="../../static/image/jianbian.png" mode="widthFix"></image>
      </view>
      <view class="wrap">
        <view class='wrapBox'>
          <view>
            <text class='circle'>1</text>
            <i class='lineox'></i>
            <text class="word">邀请好友注册，填<br/>写自己推荐码</text>
          </view>
          <view>
            <text class='circle'>2</text>
            <i class='lineox'></i>
            <text class="word">好友或好友推荐<br/>的好友购买平台<br/>人员项目</text>
          </view>
          <view>
            <text class='circle'>3</text>
            <text class="word">直推好友下单我得<br/><text class="red">10%</text>奖励，好友推<br/>荐好友下单我得<text class="red">5%</text>奖励</text>
          </view>
        </view>
      </view>

      <view class="footer">
        <view class="footerTitle">
							<view v-for="(item, index) in items" class="footerTitle_item" :key="index" :class="[index === current ? 'activeStyle': 'itemStyle']"
								@click="onClickItem(index)">
										<text>{{item}}</text>
										<view :class="[index === current ? 'line': 'noLine']" ></view>
								</view>
				</view>


       <!-- <view class="nodata" v-if="nodata">
          您还没有好友...
        </view> -->
			<view class="content">
				<!-- 奖励记录 -->
				<view v-show="current === 0" class="tab">
							<view v-if="special=='true' && list.length>0" class="list awardList">
							
													<view class="item" :class="{'marginBottom':index===list.length-1}" v-for="(item,index) in list" :key="index">
																<view class="imgview">
																		<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
																		<image v-if="!item.avatar" src="../../static/image/logo.png" mode="aspectFill"></image>
																</view>
																<view class="wordWrap">
																			<view class="name">
																					<!-- <text>{{item.detail}}</text> -->
																					<text>销售奖励</text>
																					<view class="money">￥{{item.offset}}</view>
																			</view>
																			
																			<text class="createTime">{{item.createTime}}</text>
																</view>

													</view>
													<view class="viewMore" v-if="list.length%20==0&&!finished"  @click="viewMoreAward">查看更多</view>
													<view class="uni-loadmore loadfinished" v-if="finished">--没有更多数据了--</view>
													
							      </view>
								  <view v-if="special=='true' &&nodata" class="nodata">暂无数据</view>
									<view v-if="special=='false'" class="nodata">
											暂无推荐奖励资格，请联系客服获取资格
									</view>
					</view>
	
						
					
			<!-- 好友记录 -->
					<view v-show="current === 1" class="tab">
								<view  class="list" v-if="friendList.length >0">
												<view class="item"  :class="{'marginBottom':index===friendList.length-1}" v-for="(item,index) in friendList" :key="index" v-if='item.inviteUserId===currentId'>
															<view class="imgview">
																	<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
																	<image v-if="!item.avatar" src="../../static/image/logo.png" mode="aspectFill"></image>
															</view>
															<view class="wordWrap">
																		<view class="name">
																				<text v-if="item.info.name">{{item.info.name}}</text>
																				<text v-if="!item.info.name">用户{{item.id}}</text>
																				<!-- <text v-if='item.inviteUserId===currentId' class="tag">直推</text> -->
																				<!-- <text v-if='item.inviteUserId !==currentId' class="tag">间接推荐</text> -->
																		</view>
																		
																		<text class="createTime">{{item.createTime}}</text>
															</view>
													</view>
											<view class="viewMore" v-if="friendList.length%20 ==0&&!friend_finished"  @click="viewMoreFriend">查看更多</view>
											<view class="uni-loadmore loadfinished" v-if="friend_finished">--没有更多数据了--</view>
									</view>
									<view v-if="nodata_friend" class="nodata">暂无数据</view>
									
						</view>
   </view>
     
      </view>
    </view>
	</view>
</template>

<script>
var util = require('../../common/util.js');
export default {
	data() {
		return {
			list: [],
			friendList: [],
			nodata: false,
			nodata_friend: false,
			totalThanks: 0,
			total: 0,
			current: 0,
			activeColor: '#ff1268;',
			items: ['奖励记录', '好友列表'],
			currentId: 0,
			loading: false,
			special: false,
			finished: false,
			friend_loading: false,
			friend_finished: false,
			userInvitesParams: {
				start: 0,
				limit: 20,
				token: util.getUserToken()
			},
			params: {
				startTime: '',
				endTime: '',
				operateType: 'dividends',
				wealthType: 'award',
				start: 0,
				limit: 20,
				token: util.getUserToken()
			}
		};
	},
	onLoad(e) {
		this.special = e.special
		console.log(typeof e.special)
		this.currentId = uni.getStorageSync('id');
		uni.showLoading({
			title: '加载中...'
		});
		this.getFriendList();
		this.getAwardList();
	},
	methods: {
		viewMoreAward() {
			this.loading = true;
			this.params.start += this.params.limit;
			this.getAwardList();
		},
		viewMoreFriend() {
			this.friend_loading = true;
			this.userInvitesParams.start += this.userInvitesParams.limit;
			this.getFriendList();
		},
		getAwardList() {
			util.ajax(
				'userWealthFlows',
				this.params,
				data => {
					uni.hideLoading();
					let json = data.data;
					if (json.status) {
						console.log(json.data);
						for (let i = 0; i < json.data.length; i++) {
							json.data[i].offset = util.showDecimal(json.data[i].offset);
							json.data[i].createTime = util.parseTime(json.data[i].createTime);

							this.list.push(json.data[i]);
						}
						if (this.list.length === 0) {
							this.nodata = true; //无数据
						} else {
							this.nodata = false;
						}

						// 加载状态结束
						this.loading = false;
						if (json.data.length < this.params.limit) {
							this.finished = true;
						}
						// console.log(this.list)
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					console.log(data);
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		},
		getFriendList() {
			util.ajax(
				'userInvites',
				this.userInvitesParams,
				data => {
					// uni.hideLoading();
					let json = data.data;
					if (json.status) {
						console.log(json.data);
						this.totalThanks = util.showDecimal(json.data.totalThanks);
						this.total = json.data.total;
						let arr = json.data.inviteUsers;
						for (let i = 0; i < arr.length; i++) {
							arr[i].createTime = util.parseTime(arr[i].createTime);
							this.friendList.push(arr[i]);
						}
						console.log(this.friendList);
						if (this.friendList.length === 0) {
							this.nodata_friend = true; //无数据
						} else {
							this.nodata_friend = false;
						}

						// 加载状态结束
						this.friend_loading = false;
						if (json.data.inviteUsers.length < this.params.limit) {
							this.friend_finished = true;
						}
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					console.log(data);
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		},
		formatMoney(money) {
			return util.showDecimal(money);
		},
		onClickItem(index) {
			if (this.current !== index) {
				this.current = index;
			}
			console.log(this.current);
		},
		activeStyle() {
			return `color:#333333;`;
		},
		itemStyle() {
			return `color:#99999;`;
		}
	}
};
</script>

<style lang="less">
page {
	background: #fff;
}
.viewMore {
	margin: 20upx auto;
	display: block;
	font-size: 28upx;
	width: 180upx;
	color: #ff1268;
	border: 1upx solid #ff1268;
	border-radius: 30upx;
	text-align: center;
	padding: 4upx 0 6upx;
}
.loadfinished {
	padding: 15upx 0;
	color: #cccccc;
	justify-content: center;
	// background: #fafafa;
}
/*通用 */
view {
	font-size: 28upx;
	line-height: 1.8;
}
.recommend {
	height: 100%;

	flex: 1;
	flex-direction: column;
	.header {
		height: 180upx;
		display: flex;
		color: white;
		.right {
			flex-direction: column;
			justify-content: center;
			background: #ff1268;
			padding-left: 36upx;
			box-sizing: border-box;
			text-align: left;
			width: 100%;
			text {
				font-size: 32upx;
				margin-bottom: 25upx;
			}
			.sub {
				width: 100%;
				display: flex;
				view {
					font-size: 24upx;
					margin-right: 12upx;
				}
			}
		}
	}
	.section1 {
		justify-content: space-between;
		margin: 36upx 30upx 0;
		.item {
			width: 48%;
			background: #faf7f0;
			height: 144upx;
			border-radius: 5upx;
			justify-content: center;
			align-items: center;

			view {
				justify-content: center;
				align-items: center;
				flex-direction: column;
				text:first-child {
					font-size: 22upx;
					color: #333333;
					font-weight: bolder;
					margin: 0;
				}
				text:last-child {
					font-size: 45upx;
					color: #ff1268;
				}
			}
		}
	}
	.section2 {
		background: #fff;
		flex-direction: column;
		.title {
			display: none;
			width: 100%;
			justify-content: center;
			align-items: center;
			height: 55upx;
			margin: 48upx 0 20upx;
			image {
				width: 30upx;
				height: 20upx;
			}
			text {
				font-size: 28upx;
				color: #b57230;
				font-weight: bolder;
				margin: 0 10upx;
			}
		}
		.wrap {
			display: none;
			background: #faf7f0;
			margin: 0 30upx;
			border-radius: 5upx;
			.red {
				color: #ff0000;
				margin-left: 5upx;
			}
			.wrapBox {
				width: 100%;
				padding: 30upx 0;
				view {
					width: 33.3%;
					position: relative;
					flex-direction: column;
					align-items: center;
					.circle {
						display: inline-block;
						padding: 12upx;
						border-radius: 50%;
						width: 12upx;
						line-height: 12upx;
						text-align: center;
						height: 12upx;
						color: #fff;
						background: #bd7e44;
						font-size: 20upx;
					}
					.lineox {
						width: 211upx;
						height: 1upx;
						display: inline-block;
						background: #e1c5ab;
						position: absolute;
						right: -112upx;
						top: 17upx;
					}
					.word {
						font-size: 24upx;
						color: #bd7e44;
						margin-top: 20upx;
						text-align: center;
						line-height: 1.5;
					}
				}
			}
		}
		.footer {
			background: #fff;
			padding: 60upx 30upx 0;
			box-sizing: border-box;
			flex-direction: column;
			.nodata {
				color: #999999;
				margin-top: 80upx;
				width: 100%;
				display: flex;
				justify-content: center;
			}
			.footerTitle {
				width: 100%;
				height: 50upx;
				box-sizing: border-box;

				.footerTitle_item {
					flex-direction: column;
					margin-right: 50upx;
					// padding-bottom: 57upx;
					height: 100upx;
					align-items: center;
					.line {
						margin-top: 10upx;
						border-radius: 10upx;
						background: #ff1268;
						height: 10upx;
						width: 50%;
					}
					.noLine {
						display: none;
					}
				}
				.activeStyle {
					color: #333333;
				}
				.itemStyle {
					color: #999999;
				}
			}
			.content {
				.tab {
					width: 100%;
					.awardList {
						margin-top: 40upx;
						width: 100%;
						padding-bottom: 30upx;
						box-sizing: border-box;
						flex-direction: column;
						.wordWrap {
							.name {
								width: 100%;
								justify-content: space-between;
								.money {
									color: #ff1268;
								}
							}
						}
						.item {
							width: 100%;
							display: flex;
							margin-bottom: 28upx;
							align-items: center;

							.colunm1 {
								width: 30%;
								text-align: right;
								margin-right: 20upx;
								flex-direction: column;
								align-items: center;

								.date {
									font-size: 22upx;
									color: #ccc;
								}
								.time {
									font-size: 18upx;
									color: #ccc;
									margin-top: 6upx;
								}
							}

							.colunm2 {
								width: 70%;
								/*border: 1upx solid red;*/
								display: flex;
								flex-direction: column;
								/*justify-content: space-between;*/
								text-align: left;
								width: 100%;
								.row1 {
									display: flex;
									justify-content: space-between;
									align-items: center;
									view:first-child {
										align-items: center;
									}
									.expenditure {
										color: #3e8fe3;
									}

									.money {
										font-size: 36upx;
										margin-right: 3upx;
										margin-left: 2upx;
									}

									.status {
										font-size: 26upx;
										color: #ff8200;
									}
									.red {
										color: #ff0000;
									}
									.gray {
										color: #999;
									}
								}
								.description {
									font-size: 26upx;
									color: #333333;
									margin-top: 8upx;
								}
							}
						}
						.marginBottom {
							margin-bottom: 0;
						}
					}
					.list {
						margin-top: 40upx;
						width: 100%;
						padding-bottom: 30upx;
						box-sizing: border-box;
						flex-direction: column;
						.item {
							width: 100%;
							height: 100upx;
							// border: 1upx solid red;
							display: flex;
							align-items: center;
							margin-bottom: 30upx;
							.imgview {
								width: 12%;
								height: 80upx;
								border-radius: 8upx;
								margin-right: 20upx;
								image {
									width: 80upx;
									height: 80upx;
									border-radius: 50%;
								}
							}

							.wordWrap {
								flex-direction: column;
								width: 88%;
								justify-content: space-between;
								.name {
									align-items: center;
									font-size: 30upx;
									color: #333333;
									.tag {
										line-height: 1.15;
										font-size: 24upx;
										color: #ff1268;
										border: 1upx solid #ff1268;
										border-radius: 10upx;
										padding: 6upx;
										margin-left: 10upx;
									}
								}
								.createTime {
									display: inline-block;
									font-size: 26upx;
									color: #999999;
									// margin-top: 24upx;
								}
							}
						}

						.marginBottom {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
}
</style>
